<template>
  <!-- 页面底部导航菜单 -->
  <div class="footer-tabbar" v-if="footerShow">
    <van-tabbar v-model="activeName">
      <van-tabbar-item
        icon="wap-home-o"
        name="home"
        to="/"
      >
        首页
      </van-tabbar-item>
      <van-tabbar-item
        icon="flower-o"
        name="villages"
        to="/villages"
      >
        村落
      </van-tabbar-item>

    </van-tabbar>
  </div>
</template>
<script>

export default {
  data () {
    return {
      activeName: 'home',
      footerShow: true
    }
  },
  created () {
    this.getRouterPath()
  },
  methods: {
    // 获取当前页面的路由地址，设置成默认显示项，目的是配合监听路由无法在当前页面刷新时默认显示问题
    getRouterPath () {
      let _this = this
      let mypath = _this.$route.path
      if (mypath == '/') {
        _this.activeName = 'home'
      } else {
        _this.activeName = mypath.replace('/', '')
      }
    },
  },
  watch: {
    // 监听路由变化，但是无法监听到刷新
    '$route.path' (newUrl, oldUrl) {
      let _this = this
      if(newUrl == '/') {
        _this.activeName = 'home'
      } else {
        _this.activeName = newUrl.replace('/', '') // 如果路由变化了，就将去除 ’/‘后的路由地址字符串赋值给menuActive ，用于当前菜单栏的高亮显示
      }


      // 根据路由判断是否显示底部菜单
      if(newUrl == '/dd') { // 不显示底部菜单的页面
        _this.footerShow = false
      } else {
        _this.footerShow = true
      }
    }
  }
}
</script>

<style scoped>
</style>
